import { Button, DatePicker, Input, Select } from "antd";
import React, { useEffect, useState } from "react";
import style from "./index.module.css";
import { DownOutlined, UpOutlined } from "@ant-design/icons";
import moment from "moment";

const SearchBox = ({ search, options = [] }) => {
  const [optionList, setOptionList] = useState([]);
  const [showMore, setShowMore] = useState(false);
  const [data, setData] = useState({});
  useEffect(() => {
    console.assert(Array.isArray(options), "参数options 类型需要一个数组");
    if (Array.isArray(options)) {
      setOptionList(options);
      const obj = {};
      options
        .map((item) => item.field)
        .forEach((item) => {
          obj[item] = undefined;
        });
      setData(obj);
    }
  }, []);

  const change = (value, item) => {
    setData((val) => ({
      ...val,
      [item.field]: value,
    }));
    if (item.change) {
      item.change();
    }
  };
  const reset = () => {
    const obj = {};
    options
      .map((item) => item.field)
      .forEach((item) => {
        obj[item] = undefined;
      });
    setData(obj);
    search({});
  };
  const getSearchData = () => {
    const searchData = JSON.parse(JSON.stringify(data));
    Object.keys(searchData).forEach((item) => {
      if (moment(searchData[item]).isValid()) {
        searchData[item] = moment(searchData[item]).format("YYYY-MM-DD HH:mm:ss");
      }
    });
    search(searchData);
  };
  return (
    <div className={style.warp}>
      <div className={style.searchBox}>
        <Input placeholder={`请输入${item.label}`} value={data[item.field]} onChange={(e) => change(e.target.value, item)} style={{ width: "220px" }} />
      </div>
      <div className={style.searchBtnBox}>
        <Button type="primary" onClick={getSearchData}>
          模糊搜索
        </Button>
        <Button onClick={reset}>高级检索</Button>
      </div>
    </div>
  );
};
export default SearchBox;
